<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="main">
        <!-- 左侧 -->
        <div class="main_left">
            <!-- 左上 -->
            <leftTop />
            <!-- 左中 -->
            <leftCom />
            <!-- 左下 -->
            <leftBot />
        </div>
        <!-- 右侧 -->
        <div class="main_right">
            <!-- 右上 -->
            <rightTop />
            <!-- 右中 -->
            <rightCom />
            <!-- 右下 -->
            <rightBot />
        </div>

    </div>
</template>
<script setup lang="ts">
// 左侧
import leftTop from './module/left-top.vue'
import leftCom from './module/left-com.vue'
import leftBot from './module/left-bot.vue'
// 右侧
import rightTop from './module/right-top.vue'
import rightCom from './module/right-com.vue'
import rightBot from './module/right-bot.vue'
</script>
<style scoped lang="scss">
.main {
    height: 100vh;
    display: flex;
    margin-top: 10px;

    // 左侧
    .main_left {
        width: 75.5%;
        height: 100vh;


    }

    // 右侧
    .main_right {
        width: 23.5%;
        height: 100vh;
        margin-left: 10px;
    }
}
</style>